<template>
	<view class="news-info-content">
		<!-- 自定义导航栏 -->
		<headerNav />
		
		<!-- tab 选项 -->
		<view class="pf-sticky">
			<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
		</view>
		
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper :current="currentTab"  duration="300" @change="swiperTab" style="height: 100%;">
			<swiper-item v-for="(tabitem,tabindex) in tabTitle" :key="tabitem.id" class="swipers" style="height: 100%;">
				<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation="true">
					<!-- 下面这种布局，需要有一个type 赖标识布局样式 ,type由后台返回，前台来判断-->
					<!-- type: 1 -->
					<view class="news-list-type1 u-f-c u-f-ac">
						<image src="/static/search/temp/1.png"></image>
						<view class="news-title">
							武当山金顶有奇观，凸显古人巧妙智慧，而后人自作聪明使之消失
						</view>
						<view class="news-comment u-f u-f-ac">
							我爱武当
							<view class="news-cmt-right u-f u-f-ac">
								<text>评论</text>
								<text>99+</text>
								<text>1.2w</text>
								<image src="/static/search/look_icon.png"></image>
							</view>
						</view>
					</view>
					<!-- type: 2 -->
					<view class="news-list-type2 u-f-c u-f-ac">
						<view class="news-list2 u-f u-f-ajc">
							<view class="news-type2-left u-f u-f-ajc">
								<image src="/static/search/temp/2.png" mode="widthFix"></image>
							</view>
							<view class="news-type2-right u-f-c u-f-ajc">
								<image src="/static/search/temp/3.png" mode="widthFix"></image>
								<image src="/static/search/temp/4.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="news-title">
							武当山金顶有奇观，凸显古人巧妙智慧，而后人自作聪明使之消失
						</view>
						<view class="news-comment u-f u-f-ac">
							我爱武当
							<view class="news-cmt-right u-f u-f-ac">
								<text>评论</text>
								<text>99+</text>
								<text>1.2w</text>
								<image src="/static/search/look_icon.png"></image>
							</view>
						</view>
					</view>
					<!-- type: 3 -->
					<view class="news-list-type3 u-f u-f-sbc">
						<view class="news-type3-left u-f-c u-f-jsb">
							<view class="news-type3-txt">
								四大名山皆拱揖，五方仙岳共朝宗，武当山在中国山峰中少有敌手
							</view>
							<view class="news-type3-cmt u-f u-f-ac">
								<text>评论</text>
								<text>99+</text>
								<text>1.2w</text>
								<image src="/static/search/look_icon.png"></image>
							</view>
						</view>
						<image src="/static/search/temp/5.png" class="news-type3-right"></image>
					</view>
					<!-- type: 4 -->
					<view class="news-list-type4">
						<view class="news-type4-list u-f u-f-sbc">
							<image src="/static/search/temp/6.png" mode="widthFix"></image>
							<image src="/static/search/temp/7.png" mode="widthFix"></image>
							<image src="/static/search/temp/8.png" mode="widthFix"></image>
						</view>
						<view class="news-title">
							武当山金顶有奇观，凸显古人巧妙智慧，而后人自作聪明使之消失
						</view>
						<view class="news-comment u-f u-f-ac">
							我爱武当
							<view class="news-cmt-right u-f u-f-ac">
								<text>评论</text>
								<text>99+</text>
								<text>1.2w</text>
								<image src="/static/search/look_icon.png"></image>
							</view>
						</view>
					</view>
					
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import navTab from '@/common/components/tabs/navTab.vue';
	import headerNav from '@/common/components/headerNav/headerNav.vue';
	export default {
		data() {
			return {
				// tab 导航相关
				tabTitle: ['武术', '太极','分类名称','风景','其它'], //导航栏格式
				currentTab:0,	//sweiper所在页
				
			}
		},
		components: {
			navTab,headerNav
		},
		methods: {
			//点击切换
			changeTab(index) {
				this.currentTab = index
			},
			//swiper 切换
			swiperTab(e) {
				this.currentTab = e.target.current;
				if (this.tabTitle.length <= 5) {
					this.$refs.navTab.navClick(this.currentTab)
				} else {
					this.$refs.navTab.longClick(this.currentTab)
				}
			}
			
		}
	}
</script>

<style lang="scss">
page {
	height: 100%;
	width: 100%;
	background-color: #f6f6f6;
}

@import './newsInfo.scss'
</style>
